<template>
  <div>
    <div class="cards-demo">
      <RotateCards
          :data="[1,2,3,4,5,6,7,8,9]"
          :direction="direction"
          :duration="20000"
          :tilt="-15"
          radius="46%"
          item-class="item-class"
          ref="rotateCardsRef"
      >
        <template #default="{ item }">
          <div>
            {{item}}
          </div>
        </template>
      </RotateCards>
    </div>
    <button @click="reverseAnimates">反转</button>
    <button @click="restAnimates">重置</button>
    <button @click="stopAnimates">停止</button>
    <button @click="startAnimates">开始</button>
  </div>
</template>

<script setup>
import { ref } from "vue"
defineOptions({
  name: "rotate-cards-demo",
  inheritAttrs: false,
})

const direction = ref('right')
function reverseAnimates() {
  direction.value = direction.value === 'left' ? 'right' : 'left'
}

const rotateCardsRef = ref()

function restAnimates() {
  rotateCardsRef.value?.rest()
}

function stopAnimates() {
  rotateCardsRef.value?.stop()
}

function startAnimates() {
  rotateCardsRef.value?.start()
}
</script>

<style scoped>
.cards-demo {
  width: 100%;
  height: 400px;
  background-color: #fafafa;
}
:deep(.item-class) {
  background-color: #09c;
  width: 25%;
  height: 20%;
}
</style>